<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性分级渲染、显示影藏</title>
    <link rel="stylesheet" href="http://localhost:8080/libs/Cesium/1.40/Build/Cesium/Widgets/widgets.css">
    <script type="text/javascript" src="http://localhost:8080/plugin/jquery/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="http://localhost:8080/libs/Cesium/1.40/Build/Cesium/Cesium.js"></script>
    <style>
        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #btnDiv{
            position: absolute;
            left: 10px;
            top: 10px;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id="btnDiv">
    <button class="cesium-button" onclick="colorByHeight()">根据高度分级渲染</button>
    <button class="cesium-button" onclick="colorByArea()">根据面积分级渲染</button>
    <button class="cesium-button" onclick="colorByLatitude()">根据纬度分级渲染</button>
    <button class="cesium-button" onclick="colorByDistance()">根据距离分级渲染</button>
    <button class="cesium-button" onclick="colorByNameRegex()">根据正则表达式分级渲染</button>
    <button class="cesium-button" onclick="hideByHeight()">根据高度显影</button>
</div>
<script>
    var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, //是否创建动画小器件，左下角仪表
        baseLayerPicker: false,//是否显示图层选择器,右上角按钮
        fullscreenButton: false,//是否显示全屏按钮,右下角按钮
        geocoder: false,//是否显示geocoder小器件，右上角查询按钮
        homeButton: false,//是否显示Home按钮,右上角按钮
        infoBox: true,//是否显示信息框
        sceneModePicker: false,//是否显示3D/2D选择器 ,右上角按钮
        selectionIndicator: false,//是否显示选取指示器组件，绿色选中框
        timeline: false,//是否显示时间轴，底部
        navigationHelpButton: false//是否显示帮助按钮，右上角按钮
    });

    // 定义初始视角的位置和方位
    var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753); // 目标坐标
    var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21, -21, 0); // 方位

    // 设置camera的位置
    viewer.scene.camera.setView({
        destination: initialPosition,
        orientation: initialOrientation,
        endTransform: Cesium.Matrix4.IDENTITY // 代表相机参考框架的变换矩阵*********不明白，写了跟没写没区别*********
    });

    // 加载3D Tiles 图层
    var tileSet = new Cesium.Cesium3DTileset({
        url: "https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s"
    });
    viewer.scene.primitives.add(tileSet);

    //  > 3D Tiles Styling language [https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/Styling]

    function colorByHeight() {
        tileSet.style = new Cesium.Cesium3DTileStyle({
            // 第一个样式参数
            color: {
                // 从上到下 依次匹配, true是default的意思，当前面的条件都不满足时
                conditions: [
                    ["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
                    ["${height} >= 200", "rgb(102, 71, 151)"],
                    ["${height} >= 100", "rgb(170, 162, 204)"],
                    ["${height} >= 50", "rgb(224, 226, 238)"],
                    ["${height} >= 25", "rgb(252, 230, 200)"],
                    ["${height} >= 10", "rgb(248, 176, 87)"],
                    ["${height} >= 5", "rgb(198, 106, 11)"],
                    ["true", "rgb(127, 59, 8)"]
                ]
            }
        });
    }

    function colorByArea() {
        tileSet.style = new Cesium.Cesium3DTileStyle({
            // 使用函数标识 mix线性插值函数
            color: "mix(color('yellow'), color('red'), min(${area} / 10000.0, 1.0))"
        });
    }

    function colorByLatitude() {
        tileSet.style = new Cesium.Cesium3DTileStyle({
            color: {
                conditions: [
                    ["${latitude} >= 0.7125", "color('purple')"],
                    ["${latitude} >= 0.712", "color('red')"],
                    ["${latitude} >= 0.7115", "color('orange')"],
                    ["${latitude} >= 0.711", "color('yellow')"],
                    ["${latitude} >= 0.7105", "color('lime')"],
                    ["${latitude} >= 0.710", "color('cyan')"],
                    ["true", "color('blue')"]
                ]
            }
        });
    }

    function colorByDistance() {
        tileSet.style = new Cesium.Cesium3DTileStyle({
            // 第二个属性 defines， 提前预处理一些变量
            defines : {
                distance : "distance(vec2(${longitude}, ${latitude}), vec2(-1.291777521, 0.7105706624))"
            },
            color : {
                conditions : [
                    ["${distance} > 0.0002", "color('gray')"],
                    ["true", "mix(color('yellow'), color('green'), ${distance} / 0.0002)"]
                ]
            }
        });
    }

    function colorByNameRegex() {
        tileSet.style = new Cesium.Cesium3DTileStyle({
            // 正则表达式，匹配name中有字符3
            color : "(regExp('3').test(${name})) ? color('cyan', 0.9) : color('purple', 0.1)"
        });
    }

    function hideByHeight() {
        // 第三个属性 show,条件匹配的显示，否则影藏
        tileSet.style = new Cesium.Cesium3DTileStyle({
            show : "${height} > 200"
        });
    }

</script>
</body>
</html>